<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
    v-loading="isLoading">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.gatewayName" prop="gatewayName">
          <el-input :maxlength="30" :show-word-limit="true" v-model.trim="formInline.gatewayName" clearable
            :placeholder="prompt?.gatewayName" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.gatewaySN" prop="gatewaySN">
          <el-input v-model.trim="formInline.gatewaySN" clearable :placeholder="prompt?.gatewaySN" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="网关类型" prop="gatewayType">
          <el-radio-group v-model="formInline.gatewayType">
            <el-radio v-for="item in GATEWAYTYPE" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.status" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio v-for="item in STRATEGYSTATUS" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="流量卡" prop="flowCardNum">
          <el-input v-model.trim="formInline.flowCardNum" @input="inputchange" clearable
            :placeholder="prompt?.flowCardId" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.rate" >
          <div class="flex">
            <el-input v-model.trim="formInline.rate" type="number" clearable :placeholder="prompt?.rate" />
            <div class="text-[#999999] whitespace-nowrap ml-[10px]">单位:秒,仅用于MODBUS协议</div>
          </div>
          
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="网关备注" prop="remark">
          <el-input :maxlength="100" :show-word-limit="true" v-model="formInline.remark" :autosize="{ minRows: 4 }"
            type="textarea" clearable placeholder="请输入网关备注" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import { getflowcardmsg } from "@/api/operate/gateway-administration/index";
import type { infoType } from "@/api/operate/gateway-administration/index";
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  flowCardNum: any;
  flowCardId: any;
};
import {
  WORKORDER_TYPE,
  WORKORDER_DISPATCH_TYPE
} from "@/constant/workorder-mangenment";
import { STRATEGYSTATUS,GATEWAYTYPE } from "@/constant/device-mangenment";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false,
  flowCardNum: null,
  flowCardId: null
});
const ruleFormRef = ref();
const formRules = reactive(<FormRules>{
  id: [{ required: true, message: prompt?.id, trigger: "blur" }],
  projectName: [
    { required: true, message: prompt?.projectName, trigger: "blur" }
  ],
  gatewayName: [
    { required: true, message: prompt?.gatewayName, trigger: "blur" }
  ],
  gatewaySN: [{ required: true, message: prompt?.gatewaySN, trigger: "blur" }, { pattern: /^[0-9a-zA-Z]+$/, trigger: "change", message: "只能输入数字和字母" }],
  commStatus: [
    { required: true, message: prompt?.commStatus, trigger: "blur" }
  ],
  status: [{ required: true, message: prompt?.status, trigger: "blur" }],
  gatewayType:[{ required: true, message: prompt?.status, trigger: "blur" }],
  rate: [
    { required: true, message: prompt?.rate, trigger: "blur" },
    { pattern: /^[1-9][0-9]*$/, trigger: "changblure", message: "只能输入正整数" }
  ],
  flowCardNum: [{ pattern: /^[0-9a-zA-Z]+$/, trigger: "change", message: "只能输入数字和字母" }, { pattern: /^[A-Za-z0-9]{10,16}$/, trigger: "change", message: "流量卡号应为10-16位" }]
});
let timer = null;
function throttle(fn, delay) {
  if (timer == null) {
    timer = setTimeout(() => {
      if (
        props.formInline.deviceSN !== null ||
        props.formInline.deviceSN.length > 2
      ) {
        fn();
      }
      clearTimeout(timer);
      timer = null;
    }, delay);
  }
}

// // 设定另一个时间，例如2023年4月1日下午3点30分
// const otherTime = new Date('2023-04-01T15:30:00');
const getdatadeviceinfo = () => {
  getflowcardmsg({ flowCardNum: props.formInline.flowCardNum }).then(res => {
    if (res.code == 200) {
      const nows = new Date();
      const resdata: any = res.result;
      let timeis = nows.getTime() - new Date(resdata.expireDate).getTime();
      if (
        resdata.flowCardId !== 0 &&
        resdata.expireDate !== "" &&
        resdata.status !== 1
      ) {
        if (timeis > 0) {
          ElMessage.error("当前流量卡已过期");
          props.formInline.flowCardId = null;
          return;
        }
        props.formInline.flowCardId = resdata.flowCardId;
        ruleFormRef.value.clearValidate(['flowCardId']);
      } else {
        props.formInline.flowCardId = null;
        ElMessage.error("当前流量卡不可用");
      }
    }
  });
};
const inputchange = e => {
  if (props.flowCardNum !== null && props.flowCardNum !== "" && props.flowCardNum == e) {
    props.formInline.flowCardId = props.flowCardId;
    ruleFormRef.value.clearValidate(['flowCardId']);
    return
  }
  if (e == null || e.length < 10) {
    props.formInline.flowCardId = null;
    return;
  }
  throttle(getdatadeviceinfo, 1000);
};
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
